<template>
<div class="mian">
 <div class="normal-upper" v-if="!num">
     <p>用心做，为安全</p>
     <div>
         <p>正常</p>
         <div></div>
     </div>
 </div>

 <!-- <div class="abnormal-upper" v-if="'abnormal' == state">
     <p>用心做，为安全</p>
     <div>
         <p>异常</p>
         <div></div>
     </div>
 </div> -->

 <div class="callThePolice-upper" v-if="num">
     <p>用心做，为安全</p>
     <div>
         <p>报警</p>
         <div></div>
     </div>
 </div>

   <div class="item">
         <div class="left">
         <div class="list"></div>
         <p>设备状态</p>
         </div>
         <div class="right" @click="giveAnalarm">
              <p class="one">报警{{num? num : 0}} </p>
             <!-- <P class="two">异常{{state == 'abnormal'? 1:0 }} 正常{{state == 'normal'? 1:0 }}</P> -->
         </div>
     </div>

     <div class="item">
         <div class="left">
             <div class="record"></div>
             <p>历史记录</p>
         </div>
         <div class="right">
             <p class="one">上次产生的记录时间</p>
             <P class="two">{{time()}}</P>
         </div>
     </div>
 <div></div>
</div>
</template>
<script>
import day from 'dayjs'
export default {
  data () {
    return {
      num: 0
    }
  },
  computed: {
    siteid () {
      return this.$store.state.user.sitelist[0].siteid
    }
  },
  created () {
    this.getAlarmNum()
  },
  methods: {
    time () {
      return day().format('YYYY年MM月DD日 HH:mm')
    },
    // 到警告详情页面
    giveAnalarm () {
      if (this.num) {
        this.$router.push('/giveAnalarm')
        // this.$router.push('/camera')
        // this.$router.push('/scanning')
      }
    },
    // 请求接口,拿告警条数
    async getAlarmNum () {
      const param = {
        siteid: this.siteid,
        assetid: '',
        page: '1',
        pageSize: '0',
        startDate: '',
        endDate: '',
        ismeasurement: 'NO',
        islocation: 'NO',
        isalert: 'YES',
        history: 'NO'
      }
      const res = await this.$store.dispatch('assetevent', param)
      if (res.status === '0') {
        this.num = Number(res.context.numResults)
      }
    }
  }

}
</script>
<style lang="less" scoped>
.mian{
    position: relative;
    [class$="upper"]{
        position: relative;
        width: 100%;
        height: 60%;
        overflow: hidden;
        &>div{
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #fff;
            margin: calc(50% - 75px) auto;
            text-align: center;
            &>div{
                display: inline-block;
                height: 30px;
                width: 30px;
                margin-top:calc(50% - 35px);
            }
            &>p{
                width: 100%;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                position: absolute;
                top: calc(50% - 15px);
                text-align: center;
                font-weight: 800;
            }
        }
        &>p{
            width: 100%;
            position: absolute;
            top: 0;
            text-align: center;
            color: #fff;
            font-size: 18px;
            line-height: 30px;
            font-weight: 600;
        }
    }
}
.abnormal-upper{
    background: -webkit-linear-gradient(left top, #FBD25F , #FE9854); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #FBD25F, #FE9854); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #FBD25F, #FE9854); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #FBD25F , #FE9854);
    &>div{
        &>div{
          background: url('~@/assets/image/abnormal.svg') no-repeat center / cover;
          }
          &>P{
             color: #F5B05B;
          }

    }

}
.normal-upper{
    background: -webkit-linear-gradient(left top, #77DE68 , #12BC88); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #77DE68, #12BC88); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #77DE68, #12BC88); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #77DE68 , #12BC88);
    &>div{
        &>div{
            background: url('~@/assets/image/normal.svg') no-repeat center / cover;
        }
        &>p{
            color: #46BC1C;
        }

    }
}
.callThePolice-upper{
    background: -webkit-linear-gradient(left top, #F1B591 , #E9433A); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #F1B591, #E9433A); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #F1B591, #E9433A); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #F1B591 , #E9433A);
    &>div{
        &>div{
            background: url('~@/assets/image/fire.svg') no-repeat center / cover;
        }
        &>P{
            color: #E05945;
        }

    }

}
.item{
    height: 80px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    &>div{
        display: inline-block;
        text-align: center;
        font-size: 18px;
    }
    .left{
        font-size: 12px;
        width: 110px;
        border-right: 1px solid #ccc;
        &>div{
            width: 40px;
            height: 40px;
            margin: 0 auto 10px auto;
        }
    };
    .right{
        width: calc(100% - 130px);
        text-align: center;
        line-height: 30px;
        .two{
            color: #ccc;
        }
    }
}
.record{
   background: url('~@/assets/image/historical_record.svg')no-repeat center / cover;
}
.list{
  background: url('~@/assets/image/list.svg')no-repeat center / cover;
}

</style>
